{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .thumbnail{
            padding:0;
            border-radius: 5%;
            margin-bottom:0;
        }
        .cycle{
            display:inline-block;
            height:20px;
            width:20px;
            {# border:1px solid black; #}
            border-radius:50%;
        }
        [name='color']{
            display: none;
        }
        .c1{
            border: 2px solid black;
        }
    </style>
    <link rel="stylesheet" href="{% static 'css/error.css' %}">
{% endblock %}

{% block content %}
<!-- 控制弹框按钮 -->
<div>
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
  <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建项目
</button>
</div>

    <div class="panel panel-default" style="margin-top:10px">
  <div class="panel-heading"><i class="fa fa-star"></i> 星标</div>
  <div class="panel-body">
    <div class="row">
        {% for star_pro in project_dict.star %}
            <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
                <a href="{% url 'dashboard' star_pro.value.id %}" >
              <div style="height:100px;line-height:100px;text-align:center;background-color:{{ star_pro.value.get_color_display }};border-top-right-radius:5%;border-top-left-radius:5%">
                  {{ star_pro.value.name }}
              </div>
                </a>
              <div class="caption" style="padding:6px">
                <p style="margin-bottom:0; " class="clearfix">
                    <span class="pull-left">
                        <a href="{% url 'project_unstar' star_pro.type star_pro.value.id %}">
                            <i class="fa fa-star" style="color:orange;"></i>
                        </a>

                        <span class="creator">{{ star_pro.value.creator.username }}</span>
                    </span>
                    <span class="pull-right">
                        <i class="fa fa-user-o"></i>
                        <span class="count">{{ star_pro.value.join_count }}</span>
                    </span>
                </p>
              </div>
            </div>
            </div>
        {% endfor %}
    
    </div>
  </div>
</div>
    <div class="panel panel-default" style="margin-top:10px">
  <div class="panel-heading"><i class="fa fa-list" aria-hidden="true"></i> 我创建的</div>
  <div class="panel-body">
    <div class="row">
      {% for star_pro in project_dict.my %}
            <div class="col-sm-3 col-md-2">
            <div class="thumbnail">
              <div style="height:100px;line-height:100px;text-align:center;background-color:{{ star_pro.get_color_display }};border-top-right-radius:5%;border-top-left-radius:5%">
                  {{ star_pro.name }}
              </div>
              <div class="caption" style="padding:6px">
                <p style="margin-bottom:0; " class="clearfix">
                    <span class="pull-left">
                        <a href="{% url 'project_star' 'my' star_pro.id %}">
                            <i class="fa fa-star" style="color:lightgray;"></i>
                        </a>
                        <span class="creator">{{ star_pro.creator.username }}</span>
                    </span>
                    <span class="pull-right">
                        <i class="fa fa-user-o"></i>
                        <span class="count">{{ star_pro.join_count }}</span>
                    </span>
                </p>
              </div>
            </div>
            </div>
        {% endfor %}
    </div>
  </div>
    </div>
    <div class="panel panel-default" style="margin-top:10px">
        <div class="panel-heading"><i class="fa fa-snowflake-o"></i> 我参与的</div>
        <div class="panel-body">
        <div class="row">
          {% for star_pro in project_dict.join %}
                <div class="col-sm-3 col-md-2">
                <div class="thumbnail">
                  <div style="height:100px;line-height:100px;text-align:center;background-color:{{ star_pro.get_color_display }};border-top-right-radius:5%;border-top-left-radius:5%">
                      {{ star_pro.name }}
                  </div>
                  <div class="caption" style="padding:6px">
                    <p style="margin-bottom:0; " class="clearfix">
                        <span class="pull-left">
                            <a href="{% url 'project_star' 'join' star_pro.id %}">
                                <i class="fa fa-star" style="color:lightgray;"></i>
                            </a>
                            <span class="creator">{{ star_pro.creator.username }}</span>
                        </span>
                        <span class="pull-right">
                            <i class="fa fa-user-o"></i>
                            <span class="count">{{ star_pro.join_count }}</span>
                        </span>
                    </p>
                  </div>
                </div>
                </div>
            {% endfor %}
        </div>
        </div>
    </div>

<!-- 弹框主体部分 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加项目</h4>
      </div>
        <div class="modal-body">
          <form id="addform">
              {% for field in form %}
              {% csrf_token %}
                  <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label}}</label>
                    {{ field }}
                    <span class="error_msg"></span>
                  </div>
              {% endfor %}
              

          </form>

        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button id="btnsubmit" type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %}

    <script>
        $(function(){
            bindSubmit();
            changeColor();
        });
        function bindSubmit(){

            $('#btnsubmit').click(function(){
                var data = $('#addform').serialize();
                $.ajax({
                    url:'{% url "project_list" %}',
                    type:'post',
                    data:data,
                    success:function (res){
                        if (res.status){
                            // 刷新页面
                            location.reload();
                        }else{
                            for (var key in res.error_msg){
                                $('#id_' + key).next().text(res.error_msg[key][0])
                            }
                        }
                    }


                })


            })
        }

        // 添加项目选择颜色
        function changeColor(){
            $('.cycle').click(function (){
                $(this).addClass('c1').parent().siblings().find('.cycle').removeClass('c1');

            })
        }

    </script>

{% endblock %}




